<!--邮箱-->
<template>
  <div class="app-container" style="width: 700px;margin:0 auto">
    <el-steps :active="currentStep" align-center class="common-step" style="margin-bottom: 25px;">
      <el-step title="验证手机号" />
      <el-step title="修改邮箱" />
      <el-step title="完成" />
    </el-steps>
    <el-form
      ref="emailForm"
      :model="emailForm"
      :rules="emailRules"
      class="common-form-with-desc"
      status-icon
      style="width: 550px; margin: 0 auto;"
      label-width="100px">
      <div>手机验证码验证 账号 <span class="color-primary"> {{ emailForm.username }}
        <span v-if="emailForm.email"> (当前邮箱:{{ emailForm.email }})</span>
        <span v-else class="color-danger"> (还未设置邮箱)</span>

      </span> 为确认是你本人操作，请完成以下验证</div>
      <el-divider style="margin-top: 10px;" />
      <template v-if="currentStep===1">
        <el-form-item label="手机号码:">
          {{ emailForm.mobile }}
        </el-form-item>
        <el-form-item label="验证码:" prop="verificationCode">
          <verification-code
            ref="verificationCode"
            v-model="emailForm.verificationCode"
            :code-device="emailForm.mobile"
            :height="32"
            :check="false"
            @checkCode="handleCheckCode1" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleNext(1)">确定</el-button>
        </el-form-item>
      </template>
      <template v-if="currentStep===2">
        <el-form-item label="登录名:">
          {{ emailForm.username }}
        </el-form-item>
        <el-form-item label="邮箱:" prop="newEmail">
          <email-input-select v-model="emailForm.newEmail" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="验证码:" prop="emailVerificationCode">
          <verification-code
            ref="emailVerificationCode"
            v-model="emailForm.emailVerificationCode"
            :code-device="emailForm.newEmail"
            :height="32"
            :check="false"
            mode="email"
            @checkCode="handleCheckCode2" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleNext(2)">确定</el-button>
        </el-form-item>
      </template>
      <template v-if="currentStep===3">
        <el-form-item>
          <div style="font-size:15px;font-weight:bold">修改成功，<span class="color-primary">{{ emailForm.newEmail }}</span>可作为您的邮箱</div>
          <div class="common-tips">该邮箱用于邮箱登录，安全校验及必要时的紧急联系 </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleBack">返回</el-button>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮箱不能为空!'))
      }
      console.log(value, this.emailForm.email)
      if (value === this.emailForm.email) {
        return callback(new Error('新旧邮箱不能一致!'))
      }
      return callback()
    }
    return {
      currentStep: 1,
      emailForm: {
      },
      emailRules: {
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        newEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' },
          { validator: this.$validate.validateEmail, trigger: 'blur' }
        ],
        newEmail1: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        emailVerificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]

      }
    }
  },
  watch: {
  },
  created() {
    this.emailForm = {
      username: this.userInfo.username,
      mobile: this.userInfo.mobile,
      email: this.userInfo.email,
      verificationCode: '',
      newEmail: '',
      emailVerificationCode: ''
    }
  },
  methods: {
    handleNext(step) {
      this.$refs['emailForm'].validate(valid => {
        if (valid) {
          if (step === 1) {
            this.currentStep = step + 1
            this.$nextTick(() => {
              if (this.$refs.emailVerificationCode) {
                this.$refs.emailVerificationCode.init()
              }
            })
          }
          if (step === 2) {
            this.modifyEmail()
          }
        }
      })
    },
    handleBack() {
      var userInfo = this.$store.getters.userInfo
      this.emailForm = {
        username: userInfo.username,
        mobile: userInfo.mobile,
        email: userInfo.email,
        verificationCode: '',
        newEmail: '',
        emailVerificationCode: ''
      }
      this.currentStep = 1
    },
    handleCheckCode1(val) {
      if (val) {
        this.handleNext(1)
      }
    },
    handleCheckCode2(val) {
      if (val) {
        this.handleNext(2)
      }
    },
    async modifyEmail() {
      try {
        var token = await this.$store.dispatch('modifyEmail', this.emailForm)
        await this.$store.dispatch('resetToken', token)
        this.currentStep = 3
      } catch (err) {
        console.error(err)
        if (err.code === 10000000) {
          this.$refs.emailVerificationCode.init()
          this.currentStep = 1
          this.emailForm = {
            ...this.emailForm,
            verificationCode: '',
            newEmail: '',
            emailVerificationCode: ''
          }
          this.$refs.verificationCode.init()
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
